
import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;
import * as cc from "cc";
import { VMEntity } from '../../framework/vm/VMEntity';
import { VMCenter } from '../../framework/vm/VMCenter';
import { userData } from '../../game/storage/UserData';
import { DemoVMSceneBase } from './DemoVMSceneBase';
import { Toast } from '../../framework/gui/Toast';

/**
 * Predefined variables
 * Name = DemoVMBindUnBind
 * DateTime = Sat Mar 19 2022 10:32:09 GMT+0800 (中国标准时间)
 * Author = 272493431
 * FileBasename = DemoVMBindUnBind.ts
 * FileBasenameNoExtension = DemoVMBindUnBind
 * URL = db://assets/scripts/scene/VMDemo/DemoVMBindUnBind.ts
 * ManualUrl = https://docs.cocos.com/creator/3.4/manual/zh/
 *
 */
 
@ccclass('DemoVMBindUnBind')
export class DemoVMBindUnBind extends DemoVMSceneBase implements IMVVM{
    _vmTag: string;
    _vmEntitys: VMEntity[];
  
    @property(cc.Label)
    levelLabel: cc.Label = null;

    @property(cc.Node)
    starGroup: cc.Node = null;

    @property(cc.Node)
    spriteFace: cc.Node = null;

    @property(cc.Button)
    btnMulLevel: cc.Button = null;

    @property(cc.Button)
    btnAddLevel: cc.Button = null;
  

    // @property(cc.Button)
    // btnRemoveStartAll: cc.Button = null;

    // @property(cc.Button)
    // btnRemoveStartAngle: cc.Button = null;
    
    // @property(cc.Button)
    // btnAddStartAll: cc.Button = null;

    // @property(cc.Button)
    // btnAddStartAngle: cc.Button = null;


    start() {
        super.start();
    }

    onEnable(){

        this.bindClick('btnRemoveStartAll',this.onClickRemoveStartAll.bind(this));
        
        this.bindClick('btnAddStartScale',this.onClickAddStartScale.bind(this));
        this.bindClick('btnAddStartAngle',this.onClickAddStartAngle.bind(this));
        this.bindClick('btnRemoveStartScale',this.onClickRemoveStartScale.bind(this));
        this.bindClick('btnRemoveStartAngle',this.onClickRemoveStartAngle.bind(this));
        


        VMCenter.add(userData,"userdata");

        VMCenter.Label(this,this.levelLabel,{watchPath: "userdata.level"});
        
        // // 控制星星的显示  不填写 property 则默认为 active
        VMCenter.Children(this,this.starGroup,{watchPath: "userdata.level", formator(opts){
            return opts.newValue > opts.nodeIdx;
        }})
        
        // // 控制星星的角度
        // VMCenter.Children(this,this.starGroup,{watchPath: "userdata.level",property: "angle", formator(opts){
        //     return opts.newValue > opts.nodeIdx ? 30 : 0;
        // }})

        this.onClickAddStartAngle()
        this.onClickAddStartScale()

        // 大于 5 级的时候显示 face 节点
        // VMCenter.Node(this,this.spriteFace,{watchPath: "userdata.level",formator(opts){
        //     return opts.newValue > 5;
        // }})
        VMCenter.UITransform(this,this.spriteFace,{watchPath: "userdata.level",property: 'contentSize',formator(opts){
            return opts.newValue > 3 ? cc.size(197,93) : cc.size(197 * 0.5,93 * 0.5);
        }})
        VMCenter.UIOpacity(this,this.spriteFace,{watchPath: "userdata.level",formator(opts){
            return opts.newValue > 3 ? 255 : 126;
        }})
        VMCenter.Color(this,this.spriteFace,{watchPath: "userdata.level",formator(opts){
            return opts.newValue > 3 ? cc.Color.RED : cc.Color.BLUE;
        }})

        VMCenter.ButtonClick(this,this.btnAddLevel,{
                watchPath: 'userdata.level', min: 0, max: 11, operation: (param) => {
                    return param.currentValue + 1;
                }
        });

        VMCenter.ButtonClick(this,this.btnMulLevel,{
            watchPath: 'userdata.level', min: 0, max: 11, operation: (param) => {
                return param.currentValue - 1;
            }
        });
    }

    onDisable(){
        
        VMCenter.remove(this);
    }


    bindClick(btnName,fn){
        let btn = cc.find(`buttonGroup2/${btnName}`,this.node);
        btn.on('click',()=>{
            fn();
        });
    }

    onClickRemoveStartAll(){
     
        // 移除绑定
      let result =  VMCenter.removeBind(this,this.starGroup);
        this.showToast('移除','星星','所有绑定',result);
    }
    
    
    onClickAddStartAngle(){
        // 控制星星的角度
        VMCenter.Children(this,this.starGroup,{watchPath: "userdata.level",property: "angle", formator(opts){
            return opts.newValue > opts.nodeIdx ? 30 : 0;
        }})
        this.showToast('增加','星星','angle 绑定',true);
    }
    onClickRemoveStartAngle(){
        // 移除星星的角度 控制  
       let result = VMCenter.removeBindWithFilter(this,(entity)=>{
            let is = entity.node === this.starGroup;
            return is && entity.observerAttr['property'] == 'angle';
        });

        this.showToast('移除','星星','angle 绑定',result);

    }

    
    onClickAddStartScale(){

        // 控制星星的角度
        VMCenter.Children(this,this.starGroup,{watchPath: "userdata.level",property: "scale", formator(opts){
            return opts.newValue > opts.nodeIdx ? cc.v3(1,1,1) : cc.v3(0.5,0.5,0.5);
        }})

        
        this.showToast('增加','星星','scale 绑定',true);
    }
    onClickRemoveStartScale(){
        // 移除星星的缩放 控制  
       let result = VMCenter.removeBindWithFilter(this,(entity)=>{
            let is = entity.node === this.starGroup;
            return is && entity.observerAttr['property'] == 'scale';
        });

        this.showToast('移除','星星','scale 绑定',result);

    }
    showToast(method: '移除' | "增加",name,property,result){
        Toast.getInstance().show(`${method}${name}${property}${result ? "成功" : "失败"}`);
    }

    // update (deltaTime: number) {
    //     // [4]
    // }
}

/**
 * [1] Class member could be defined like this.
 * [2] Use `property` decorator if your want the member to be serializable.
 * [3] Your initialization goes here.
 * [4] Your update function goes here.
 *
 * Learn more about scripting: https://docs.cocos.com/creator/3.4/manual/zh/scripting/
 * Learn more about CCClass: https://docs.cocos.com/creator/3.4/manual/zh/scripting/decorator.html
 * Learn more about life-cycle callbacks: https://docs.cocos.com/creator/3.4/manual/zh/scripting/life-cycle-callbacks.html
 */

